<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body,html {
				margin: 0;
			}
			svg {
				width: 100vw;
				height: 100vh;
			}
			.container {
				transform: translate(-400px, -250px) scale(3);
			}
			#car {
				transform: scale(.2) rotate(90deg) translate(-30px,0);
			}
		</style>
	</head>
	<body>
		<svg>
		  <g class="container">
		    <path stroke="black" stroke-width="16" fill="none" d="M 200,200 L 241,200 M 259 200 L 300,200 A 50,50 0 1 1 250,250L 250,150 A 50,50 0 1 0 200,200"></path>
		    <path id="track" stroke-dasharray="4" stroke="yellow" stroke-width="1" fill="none" d="M 200,200 L 241,200 M 259 200 L 300,200 A 50,50 0 1 1 250,250L 250,150 A 50,50 0 1 0 200,200"></path>
		    <g id="car" stroke="black" stroke-width="1">
		      <animateMotion dur="10s" repeatCount="indefinite" rotate="auto">
		        <mpath xlink:href="#track" />
		      </animateMotion>
		      <path fill="lightpink" d="M 20 10 L 40 10 C40,10 50,10 50,20 L 50 80C 50,80 50,90 40,90L20,90C 20,90 10,90 10,80L10,20C 10,20 10,10 20,10"></path>
		      <path d="M 10 30 L 5,36 M 50,30 L55, 36"></path>
		      <path fill="deeppink" d="M 10,20 C 10,20 20,20 20,10 M 10,20 C 10,20 10,10 20,10M 40,10 C 40,10 40,20 50,20 M 40,10 C40,10 50,10 50,20 "></path>
		      <path fill="deeppink" d="M 20,90 L 20 87 C 20,87 15,87 10,80 M 20,90 C 20,90 10,90 10,80M 40,90 L40,87 C 40,87 45,87 50,80  C 50,80 50,90 40,90"></path>
		      <path fill="white" opacity="0.7" d="M 15,75 L 15,30 C 15,30 30,25 45,30L 45,75 C 45,75 30,85 15,75"></path>
		      <path fill="lightpink" d="M 20,45 L 20,70C 20,70 30,80 40,70 L 40,45C 40,45 30,40 20,45"></path>
		      <path fill="black" d="M 15,75 L 20,70M 45,75 L 40,70M 15,30 L 20,45M 45,30 L 40,45M 15,60 L20,60M 45,60 L 40,60"></path>
		    </g>
		  </g>
		</svg>
	</body>
</html>